<template>
  <div>
    <el-main style="padding:0">
      <el-row :gutter="15">
        <el-col :lg="12">
          <el-card shadow="never">
            <el-alert title="试试右键表格行看看. 支持多级菜单, 动态菜单等等等..." type="success" style="margin-bottom:20px;" />
            <el-table ref="tableRef" :data="tableData" highlight-current-row @row-contextmenu="rowContextmenu">
              <el-table-column type="expand">
                <template #default="props">
                  <el-empty :description="props.row.id + ' 自定义扩展行'" :image-size="60" />
                </template>
              </el-table-column>
              <el-table-column prop="id" label="ID" width="50" />
              <el-table-column prop="name" label="NAME" width="220" />
              <el-table-column prop="date" label="DATE" />
              <el-table-column prop="state" label="STATE" />
            </el-table>
          </el-card>
        </el-col>
        <el-col :lg="12">
          <el-card shadow="never" @contextmenu.prevent="openMenu">
            <div style="height:500px;display: flex;flex-direction: column;alignItems: center;justify-content: center;color: #999;">
              试试看在上下左右四个角落右键，看看边缘位置修正效果
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <ContextMenu ref="contextMenuRef" @command="handleCommand" @visible-change="visibleChange">
      <ContextMenuItem command="a" title="返回(B)" suffix="Alt + ←" />
      <ContextMenuItem command="b" title="重新加载(R)" suffix="Ctrl + R" icon="el-icon-refresh" />
      <ContextMenuItem title="切换兼容性模式" divided>
        <ContextMenuItem command="c1" title="二级菜单1" />
        <ContextMenuItem title="二级菜单2">
          <ContextMenuItem command="c2-1" title="三级菜单1" />
          <ContextMenuItem command="c2-2" title="三级菜单2" />
          <ContextMenuItem command="c2-3" title="三级菜单3" />
        </ContextMenuItem>
        <ContextMenuItem command="c3" title="二级菜单3" />
      </ContextMenuItem>
      <ContextMenuItem  command="d" title="属性(P)" divided :disabled="rowVal && rowVal.state === 0" />
      <ContextMenuItem  command="e" title="设置state=1" v-if="rowVal && rowVal.state === 0" />
    </ContextMenu>
    </div>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue'
import {ElMessage} from 'element-plus'

const ContextMenu = defineAsyncComponent(() => import('@/components/ContextMenu'))
const ContextMenuItem = defineAsyncComponent(() => import('@/components/ContextMenu/item'))

const rowVal = ref(null)
const tableRef = ref(null)
const contextMenuRef = ref(null)
const tableData = [
  {id: '1', name: 'Sakuya', date: '2021-10-10', state: 1},
  {id: '2', name: 'Lolowan(此行右键属性禁用)', date: '2021-10-09', state: 0},
  {id: '3', name: 'Ali', date: '2021-10-08', state: 1}
]

function rowContextmenu(row, column, event) {
  rowVal.value = row
  tableRef.value.setCurrentRow(row)
  contextMenuRef.value.openMenu(event)
}
function openMenu(e) {
  rowVal.value = null
  contextMenuRef.value.openMenu(e)
}
function handleCommand(command) {
  ElMessage('click on item ' + command)
  if (command === 'e') {
    rowVal.value.state = 1
  }
}
function visibleChange(visible) {
  if (!visible) {
    tableRef.value.setCurrentRow()
  }
}
</script>
